<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ include file="/WEB-INF/pages/leftNavigation.jsp" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Real_Estate_4_Rent</title>
<script type="text/javascript" src="<c:url value="/resources/js/jquery.min.js"/>">
</script>

<link href="<c:url value="/resources/style/style_test.css"/>" rel="stylesheet" type="text/css" />
<!-- bootstrap carousel -->
<link href="<c:url value="/resources/bootstrap/bootstrap.min.css"/>" rel="stylesheet" type="text/css" />
<link href="<c:url value="/resources/bootstrap/carousel.css"/>" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<c:url value="/resources/bootstrap/bootstrap.min.js"/>"></script>
<!-- /bootstrap carousel -->
<script type="text/javascript" 
   src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <!-- validate email form -->
 <!-- /validate -->
<script type="text/javascript">
	$(document).ready(function(){
		
		// carousel pause
		$('.carousel').carousel({
		  interval: false
		});
		
		var mapAddress = $(".product_map_address").val();
		var a = mapAddress.split(',');
		loadMap(a[0], a[1]);

		// call enquiry action
		$('.form_enquiry').submit(function( event ) {
			event.preventDefault(); 
			var form = $('.form_enquiry').serialize();
	   		if(validateForm()){
	   			$.ajax({
		   			url: "${pageContext.request.contextPath}/sendenquiry",
		   			type:"GET",
		   			data: form,
		   			success: function (response) {
		   				alert("A email sent to admin's website!");
		    		},
		   			error: function(jqXHR, textStatus, errorThrown){
		   				alert(textStatus);
		   			}
		   		});
	   		}else{
				alert('Email invalid');	   			
	   		}
	   		event.unbind();
		});
	});
	
	// validate email
	function validateForm() {
		var email = $(".email_customer").val();
		var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
		  if(email != "" && emailReg.test( email )) {
		    return true;
		  } else {
		    return false;
		  }
	}
	
  function loadMap(a,b) {
    var myLatlng = new google.maps.LatLng(a, b);
    var myOptions = {
      zoom: 15,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
   }
   var map = new google.maps.Map(document.getElementById("map_container"), myOptions);
   var infowindow = new google.maps.InfoWindow({
      content: '${product.productName }' + '<br/> <b>Mr Phuc: 01643 770 510</b>'
   });

   var image = '/realestate/resources/images/images.png';
   var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      icon: image
   });

     infowindow.open(map, marker);
  }
</script>
</head>

<body>
<!--the left menu amazon-->
<!-- end the left menu-->

<!-- top navigation -->
<%@ include file="/WEB-INF/pages/topnavigation.jsp" %>
<!-- / top navigation -->
<div id="main_container">
  <div id="background_main">
    <div id="main">
      <!-- search form -->
      <%@ include file="/WEB-INF/pages/searchform.jsp" %>
      <!-- /search form -->
      <div id="hot_property">
        <div id="wrapper">
         	<c:if test="${not empty product.picture}">
          			<!-- carousel -->
            		<div id="myCarousel" class="carousel slide" data-ride="carousel">
            			<!-- Indicators -->
					  	<ol class="carousel-indicators">
					  		<c:forTokens items="${product.picture }" delims=";" varStatus="counter">
								<li data-target="#myCarousel" data-slide-to="${counter.count -1}" class=""></li>	    
					  		</c:forTokens>
					  	</ol>
					  	<div class="carousel-inner">
					  			<c:forTokens var="picture" items="${product.picture }" delims=";" varStatus="counterNumberPicture">
					  				<c:choose>
					  					<c:when test="${counterNumberPicture.count == 1}">
									    	<div class="item active">
											  <img alt="${product.productName}" src="${pageContext.request.contextPath}/images${picture }">
											  <div class="container">
												<div class="carousel-caption">
												  <h4>${product.productName}</h4>
												</div>
											  </div>
											</div>
										</c:when>
										<c:otherwise>
											<div class="item">
											  	<img alt="${product.productName}" src="${pageContext.request.contextPath}/images${picture }">
											  	<div class="container">
													<div class="carousel-caption">
													  	<h4>${product.productName}</h4>
													</div>
											  	</div>
											</div>
										</c:otherwise>
								    </c:choose>
								</c:forTokens>
						  </div>
						<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
		  				<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
            		</div>
					<!-- /carousel -->
				</c:if>
      </div>
    </div>
  </div>
  	<div id="main_information_product">
			<div id="content">
				<c:if test="${not empty product}">
					<div id="product_detail">
							<c:if test="${not empty product.price }">
								<div id="price_address_first">
										<div id="price_attribute_title">Price: </div>
										<div id="price_attribute_value">
											<c:out value="${product.price } USD/month"></c:out> 
										</div>
								</div>
							</c:if>
							<c:if test="${empty product.price }">
								<div id="price_address_first">
								</div>
							</c:if>
							<c:if test="${not empty product.sqft }">
								<div id="price_address_first">
									<div id="price_attribute_title">Sqft: </div>
									<div id="price_attribute">
										<c:out value="${product.sqft } sqm"></c:out> 
									</div>
								</div>
							</c:if>
							<c:if test="${empty product.sqft }">
								<div id="price_address_first">
								</div>
							</c:if>
							<c:if test="${not empty product.room }">
								<div id="price_address_first">
									<div id="price_attribute_title">Room: </div>
									<div id="price_attribute">
										<c:out value="${product.room }"></c:out> 
									</div>
								</div>
							</c:if>
							<c:if test="${empty product.room }">
								<div id="price_address_first">
								</div>
							</c:if>
					</div>
					<div id="product_detail">
						<c:if test="${not empty product.brtbInterior }">
							<div id="price_address_first">
								<div id="price_attribute_title">Interior: </div>
								<div id="price_attribute">
									<c:out value="${product.brtbInterior.interiorName }"></c:out>
								</div>
							</div>
						</c:if>
						<c:if test="${empty product.brtbInterior }">
							<div id="price_address_first">
							</div>
						</c:if>
						<c:if test="${not empty product.brtbDistrict }">
							<div id="price_address_first">
								<div id="price_attribute_title">District: </div>
								<div id="price_attribute">
									<a href="${pageContext.request.contextPath}/resultProperty?districtCode=${product.brtbDistrict.districtCode}&pageSize=6&page=1">
										<c:out value="${product.brtbDistrict.districtName }"></c:out> 
									</a>
								</div>
							</div>
						</c:if>
						<c:if test="${empty product.brtbDistrict }">
							<div id="price_address_first">
							</div>
						</c:if>
						<c:if test="${not empty product.bedroom }">
							<div id="price_address_first">
								<div id="price_attribute_title">Bedroom: </div>
								<div id="price_attribute">
									<c:out value="${product.bedroom }"></c:out> 
								</div>
							</div>
						</c:if>
						<c:if test="${empty product.bedroom }">
							<div id="price_address_first">
							</div>
						</c:if>
					</div>
					<div id="product_detail">
						<c:if test="${not empty product.brtbCategory }">
							<div id="price_address_first">
								<div id="price_attribute_title">Category: </div>
								<div id="price_attribute">
									<a href="${pageContext.request.contextPath}/resultProperty?categoryCode=${product.brtbCategory.categoryCode }&pageSize=6&page=1">
										<c:out value="${product.brtbCategory.categoryName }"></c:out> 
									</a>
								</div>
							</div>
						</c:if>
						<c:if test="${empty product.brtbCategory }">
							<div id="price_address_first">
							</div>
						</c:if>
						<c:if test="${not empty product.brtbBuilding }">
							<div id="price_address_first">
								<div id="price_attribute_title">Building: </div>
								<div id="price_attribute">
									<a href="${pageContext.request.contextPath}/resultProperty?buildingCode=${product.brtbBuilding.buildingCode}&pageSize=6&page=1">
										<c:out value="${product.brtbBuilding.buildingName }"></c:out> 
									</a>
								</div>
							</div>
						</c:if>
						<c:if test="${empty product.brtbBuilding }">
							<div id="price_address_first">
							</div>
						</c:if>
						<c:if test="${not empty product.bathroom }">
							<div id="price_address_first">
								<div id="price_attribute_title">Bathroom: </div>
								<div id="price_attribute">
									<c:out value="${product.bathroom }"></c:out> 
								</div>
							</div>
						</c:if>
						<c:if test="${empty product.bathroom }">
							<div id="price_address_first">
							</div>
						</c:if>
						<div id="price_address" style="display:none;">
							<input type="text" class="product_map_address" value="${product.addressMap }"/>
						</div>
					</div>
					<c:if test="${not empty product.address }">
						<div id="product_detail">
							<div id="price_address_second">
								<div id="price_attribute_title">Address: </div>
								<div id="price_attribute">
									<c:out value="${product.address }"></c:out> 
								</div>
							</div>
						</div>
					</c:if>
				</c:if>
			</div>
			<div id="description">
				<div id="product_description_title">
					Description
				</div>
				<p>
					${product.description }
				</p>
			</div>
			<div id="description">
				<div id="product_description_title">Amenities</div> 
				<c:if test="${not empty amenities }">
					<c:forEach var="ameniti" items="${amenities }" varStatus="counter">
						<c:choose>
							<c:when test="${counter.count % 3 != 0 && counter.last && counter.first }">
								<div id="product_amenities">
									<div id="information_detail_item"><div id="detail_item">${ameniti.brtbCommonAttribute.commonAttributeName }</div></div>
								</div>
							</c:when>
							<c:when test="${counter.count % 3 != 0 && counter.first}">
								<div id="product_amenities">
									<div id="information_detail_item"><div id="detail_item">${ameniti.brtbCommonAttribute.commonAttributeName }</div></div>
							</c:when>
							<c:when test="${counter.count % 3 != 0 && counter.last}">
									<div id="information_detail_item"><div id="detail_item">${ameniti.brtbCommonAttribute.commonAttributeName }</div></div>
								</div>
							</c:when>
							<c:when test="${counter.count % 3 != 0}">
								<div id="information_detail_item"><div id="detail_item">${ameniti.brtbCommonAttribute.commonAttributeName }</div></div>
							</c:when>
							<c:when test="${counter.count % 3 == 0 && counter.last}">
									<div id="information_detail_item"><div id="detail_item">${ameniti.brtbCommonAttribute.commonAttributeName }</div></div>
								</div>
							</c:when>
							<c:otherwise>
									<div id="information_detail_item"><div id="detail_item">${ameniti.brtbCommonAttribute.commonAttributeName }</div></div>
								</div>
								<div id="product_amenities">
							</c:otherwise>
						</c:choose>
					</c:forEach>
				</c:if>
			</div>
			<div id="product_area" class="apartment_area">
				<div id="product_description_title">
					Map 
				</div>
				<div id="map_container">
					
				</div>		
			</div>
	</div>
	<!-- /description -->
	<div id="enquiry">
			<div id="enquiry_agent">
				<div id="product_description_title">Send Enquiry</div>
			</div>
			<div id="employee_sale">
				<div id="employee_info" style="margin-top: 5px;">Ms Lan</div>
				<div id="employee_info" style="margin-top: 5px;">
					<img src="<c:url value="/resources/images/lanlpt.jpg"/>" style="height:200px;width:150px;"/>
				</div>
				<div id="employee_info" style="margin-top: 5px;">Company: Living Home Stay</div>
				<div id="employee_info">Mobile:(+84)903 808 815</div>
			</div>
			<div id="form_enquiry" style=" margin-bottom: 10px;">
				<form class="form_enquiry">
					<div id="field">Name <div id="special_mark">*</div></div>
					<input type="text" name="name" style="width: 300px;margin-top: 5px;" required><br/>
					<div id="field">Email <div id="special_mark">*</div></div>
					<input type="text" name="email" style="width: 300px;" class="email_customer" required><br/>
					<div id="field">Contact Number <div id="special_mark">*</div></div>
					<input type="text" name="contactNumber" style="width: 300px;" onkeypress='return event.charCode >= 48 && event.charCode <= 57' maxlength="11" required><br/>
					<div id="field">Enquiry <div id="special_mark">*</div></div>
					<textarea style="margin-top:3px; width: 500px; height: 170px; resize: none;" name="enquiry" required></textarea>
					<div>
						<input type="submit" value="Submit" style="margin-left: 155px; margin-top: 5px; float:left;" id="action_search">
					</div>
				</form>
			</div>
			
		</div>
  </div>
		<!-- related product -->
		<c:if test="${not empty relateProducts}">
 	 		<div id="product_area" class="show_room_area">
 	 			<div id="name_property"><a href="resultProperty.html">More ${product.brtbCategory.categoryName } for ${product.typeProduct }</a></div>
  				<c:set var="numberApartment" value="0"> </c:set>
  				<c:forEach var="relateProduct" items="${relateProducts }">
  				<% 
  					String numberApartmentValue = (String)pageContext.getAttribute("numberApartment");
  					Integer number = Integer.parseInt(numberApartmentValue);
  					number++;
					pageContext.setAttribute("numberApartment", number + "");
			    %>
			    	<c:choose>
			    		<c:when test="${numberApartment %2 != 0 && numberApartment == fn:length(relateProducts)}">
			    			<div id="line2">
								<div id="col1">
									<a href="productDetail/${relateProduct.id }">
										<div id="image_product" width="240px" height="150px" ><img src="${pageContext.request.contextPath}/images${relateProduct.picture }" width="240px" height="150px"></img>
										</div>
									</a>
									<div id="information_detail">
										<div id="characteristic_special" style="width: 100%;">${relateProduct.special} <div id="special_mark">*</div></div>
										<div id="characteristic" style="float:right;">Bedroom: ${relateProduct.bedroom}</div>
										<div id="characteristic">Room: ${relateProduct.room}</div>
										<div id="characteristic" style="width: 100%;">Sqft: ${relateProduct.sqft} sqm</div>
										<div id="characteristic" style="width: 100%;">Interior: ${relateProduct.brtbInterior.interiorName}</div>
										<div id="price">Price: 
											<div id="highlight">${relateProduct.price} USD/month</div>
										</div>
	  									<div id="characteristic_favorite">
											<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
										</div>
									</div>
									<div id="address">Address: ${relateProduct.address}</div>
									<a href="productDetail/${relateProduct.id }">
							        	<div id="address_detail">${relateProduct.productName}</div>
							        </a>
								</div>
							</div>
			    		</c:when>
			    		<c:when test="${numberApartment %2 != 0}">
			    			<div id="line2">
								<div id="col1">
									<a href="productDetail/${relateProduct.id }">
										<div id="image_product" width="240px" height="150px" ><img src="${pageContext.request.contextPath}/images${relateProduct.picture }" width="240px" height="150px" />
										</div>
									</a>
									<div id="information_detail">
										<div id="characteristic_special" style="width: 100%;">${relateProduct.special} <div id="special_mark">*</div></div>
										<div id="characteristic" style="float:right;">Bedroom: ${relateProduct.bedroom}</div>
										<div id="characteristic">Room: ${relateProduct.room}</div>
										<div id="characteristic" style="width: 100%;">Sqft: ${relateProduct.sqft} sqm</div>
										<div id="characteristic" style="width: 100%;">Interior: ${relateProduct.brtbInterior.interiorName}</div>
										<div id="price">Price: 
											<div id="highlight">${relateProduct.price} USD/month</div>
										</div>
	  									<div id="characteristic_favorite">
											<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
										</div>
									</div>
									<div id="address">Address: ${relateProduct.address}</div>
									<a href="productDetail/${relateProduct.id }">
							        	<div id="address_detail">${relateProduct.productName}</div>
							        </a>
								</div>
			    		</c:when>
			    		<c:otherwise>
			    			<div id="col2">
								<a href="productDetail/${relateProduct.id }">
									<div id="image_product" width="240px" height="150px" ><img src="${pageContext.request.contextPath}/images${relateProduct.picture }" width="240px" height="150px" />
									</div>
								</a>
								<div id="information_detail">
									<div id="characteristic_special" style="width: 100%;">${relateProduct.special} <div id="special_mark">*</div></div>
									<div id="characteristic" style="float:right;">Bedroom: ${relateProduct.bedroom}</div>
									<div id="characteristic">Room: ${relateProduct.room}</div>
									<div id="characteristic" style="width: 100%;">Sqft: ${relateProduct.sqft} sqm</div>
									<div id="characteristic" style="width: 100%;">Interior: ${relateProduct.brtbInterior.interiorName}</div>
									<div id="price">Price: 
										<div id="highlight">${relateProduct.price} USD/month</div>
									</div>
  									<div id="characteristic_favorite">
										<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
									</div>
								</div>
								<div id="address">Address: ${relateProduct.address}</div>
								<a href="productDetail/${relateProduct.id }">
						        <div id="address_detail">${relateProduct.productName}</div>
						        </a>
							</div>
						</div>
			    		</c:otherwise>
			    	</c:choose>
			    </c:forEach>
			    <div id="more_product"><a href="#">More..</a>.</div>
 	 		</div>
 	 	</c:if>
<!--end main_container-->
	<div id="product_area_footer" class="villa_area">
		<div id="name_property_footer">
			<div id="option_menu">
				<ul id="nav">
				  <li><a href="#">passport</a></li>
				  <li><a href="#">hotel</a></li>
				  <li><a href="#">rent car</a></li>
				  <li><a href="#">school</a></li>
				</ul>
			</div>
		</div>		
	</div>
	<div id="fullsupport">
		<strong>For more information contact with Mr Phuc: 0904 674 199</strong>
	</div>
</body>
</html>
